Drag and Drop Object
A pattern used to change relationships between objects allowing users to rearrange items on a page. You would use this pattern when the user needs the ability to organize objects on the interface. When hovering over a draggable object change the cursor to indicate dragging capability. Initiate drag when the mouse has moved at least 3 pixels or has been held down for at least a half a second.
Drag and Drop Action
Allows users to directly select an item and move it to a desired location. Ie dragging an email to a trash can icon to delete it. Drag and Drop is useful for creating lists and organizing information.
Use Drag and Drop Actions sparingly in web interfaces, as they are not as discoverable or expected.
Provide alternate ways to accomplish the action. Use the Drag and Drop Action as a shortcut mechanism.
Don't use drag and drop for setting simple attributes. Instead use a more direct approach to setting attributes on the object.
Don't construct an artificial visual representation for the sole purpose of implementing drag and drop. Drag and drop should follow the natural representation of the objects in the interface.
Provide clear invitations on hover to indicate the associated action.
Drag and Drop List
Drag and Drop Object
A pattern used to change relationships between objects allowing users to rearrange items on a page. You would use this pattern when the user needs the ability to organize objects on the interface. When hovering over a draggable object change the cursor to indicate dragging capability. Initiate drag when the mouse has moved at least 3 pixels or has been held down for at least a half a second.
Drag and Drop Action
Allows users to directly select an item and move it to a desired location. Ie dragging an email to a trash can icon to delete it. Drag and Drop is useful for creating lists and organizing information.
[ invalid file: dragdrop.flv ]
Drag and Drop Collection
[ invalid file: draganddropcollection_team3.flv ]